const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const TenserWebpackPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: {
    colgcomment: "./src/main.ts",
    "colgcomment.min": "./src/main.ts",
  },
  output: {
    // path: path.resolve(__dirname, "./dist"),
    filename: "[name].js",
    library: "colgComment",
    libraryTarget: "umd", //umd 是兼容的
    /**
     * 包的导出默认是模块导出，结果是 Module {__esModule: true, Symbol(Symbol.toStringTag): 'Module'}
     * 模块导出的内容在.default,  使用这个字段可以自动我们只获取.default 中的内容
     */
    libraryExport: "default",
  },
  // resolveLoader: {
  //   modules: ["node_modules", "./myLoaders"],
  // },
  resolve: {
    extensions: [".js", ".json", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: [
          miniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "less-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        // loader: 'file-loader',
        loader: "url-loader",
        options: {
          name: "[name]-[hash:6].[ext]",
          publicPath: "../images",
          outputPath: "images",
          limit: 1024 * 50, //1024等于1K  这里显示的是50k
        },
      },
      {
        test: /\.(woff|woff2|svg|eot)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          publicPath: "../font",
          outputPath: "font",
          // publicPath: '../'
        },
      },
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          // options: {
          //   presets: [
          //     [
          //       "@babel/preset-env",
          //       {
          //         "corejs": 2,
          //         "useBuiltIns": "usage"
          //       }
          //     ]
          //   ]
          //   // presets: ["@babel/preset-env"]
          // }
        },
      },
      {
        test: /\.ts/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  mode: "development",
  optimization: {
    minimize: true, // 是否开启压缩
    minimizer: [
      new TenserWebpackPlugin({
        test: /\.min\.js$/, // 只针对 .min.js进行压缩
        terserOptions: {
          compress: {
            // drop_console: true,
            drop_debugger: false,
            // pure_funcs: ["console.log"], // 移除console
          },
        },
      }),
    ], // 压缩的方式  -- 使用 terser-webpack-plugin 压缩工具
  },

  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
      scriptLoading: "blocking",
    }),
    new miniCssExtractPlugin({
      filename: "css/[name].css", // [name]是根据入口的占位符生成的
    }),
  ],

  devtool: "source-map", //定位错误

  devServer: {
    // contentBase: "./dist", //这个一般都不会去改的
    port: 666, //服务器端口
    open: true, //自动打开浏览器的窗口
    // 配置代理 处理跨域
    proxy: {
      "/api": {
        target: "http://localhost:777",
      },
    },
  },
};
